<template>
  <div>
    <section>
      <h2>13号楼3单元</h2>
      <h3>2022-07-08 预缴电费</h3>
      <p>
        13号楼3单元共22户，有两户长期不住。本次群收款，缴费人数20户，每户50元，共计群收款1000元，实际预存电费
        1000 - 13.86（1102户六月缴过的费用） = 986.14元。入群和缴费明细如下：
      </p>
      <MxFormGroup
        :fieldsConfig="fieldsConfig"
        v-model="formData"
        label-width="120px"
        size="mini"
      ></MxFormGroup>
    </section>
    <el-row>
      <el-col>
        <el-button @click="onSave" type="primary">保存</el-button>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import MxFormGroup from '@/components/MxFormGroup.vue';
export default {
  components: { MxFormGroup },
  data() {
    !window.localStorage.eleFormData &&
      (window.localStorage.eleFormData = JSON.stringify({}));
    const family = new Array(11)
      .fill(1)
      .map((e, i) => [
        `${i > 8 ? '' : '0'}${i + 1}01`,
        `${i > 8 ? '' : '0'}${i + 1}02`,
      ])
      .flat();
    const eleFormData = JSON.parse(window.localStorage.eleFormData) || {};
    const fieldsConfig = family.map((e) => {
      const res = {
        tag: 'el-checkbox-group',
        label: e,
        prop: `i${e}`,
        defaultValue: eleFormData[`i${e}`] || [],
        span: 6,
        options: [
          {
            label: '已入群',
            value: '1',
          },
          {
            label: '已缴费50元',
            value: '2',
          },
        ],
      };
      return res;
    });
    return {
      fieldsConfig,
      formData: fieldsConfig.reduce((p, c) => {
        return {
          ...p,
          [c.prop]: c.defaultValue,
        };
      }, {}),
    };
  },
  methods: {
    onSave() {
      window.localStorage.eleFormData = JSON.stringify(this.formData);
    },
  },
};
</script>

